<template>
  <van-config-provider :theme-vars="theneVars">
    <van-row>
      <van-cell>
        <Swiper
            class="swiperBox"
            :scrollbar="{
            draggable: true,
            dragSize:40,
            snapOnRelease:false
          }"
            :slidesPerView=5
            :initialSlide=0
        >
          <SwiperSlide v-for="item in content">
            <van-grid icon-size="60">
              <van-grid-item :icon="item.picture" :text="item.title" />
            </van-grid>
          </SwiperSlide>
        </Swiper>
      </van-cell>
    </van-row>
  </van-config-provider>
</template>
<script setup lang="ts">
import {Swiper,SwiperSlide} from 'swiper/vue'
import SwiperCore,{Pagination,Scrollbar} from 'swiper';
SwiperCore.use([Scrollbar]);

const theneVars = {
  gridItemTextColor:'black',
  gridItemTextFontSize:'14px'
}

const content = [
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
]


</script>
<style scoped lang="scss">

.swiperBox{
  ::v-deep .swiper-scrollbar{
    height: .2rem;
    background: #ccc;
    width: 20%;
    //overflow: hidden;
    //margin-top: .4rem;
    opacity: .4;
    transform: translateX(-50%);
    left: 50%;
    &>.swiper-scrollbar-drag{
      //由于父级有透明 子无法显示正常背景色
      //background-color: #e97247;
      background-color: red;
    }
  }
}

</style>